<template>
	<view class="container product-list">
		<view class="rf-header-box">
			<view class="rf-header" :style="{ width: width + 'px', height: height + 'px' }">
				<view class="rf-back" :style="{ marginTop: arrowTop + 'px' }" @tap="back"><text class="iconfont iconzuo"></text></view>
				<view class="input-box" :style="{ marginTop: inputTop + 'px' }">
					<input v-model="keyword" @confirm="search" placeholder="请输入关键字" placeholder-style="font-size: 24upx; color:#ccc;" type="text" />
					<text class="icon iconfont iconsousuo2" @tap.stop="search"></text>
				</view>
			</view>
		</view>
		<view class="rf-header-screen" :style="{ top: height + 'px' }">
			<view class="rf-screen-bottom">
				<block v-for="(item, index) in attrArr" :key="index">
					<view
						class="rf-bottom-item rf-icon-ml"
						:class="[currentSelect.id == item.id ? `bg-${themeColor.name} rf-btmItem-active` : 'rf-btmItem-normal', currentSelect.id == item.id ? 'rf-btmItem-tap' : '']"
						:data-index="index"
						@tap="btnDropChange(item)"
					>
						<view class="rf-bottom-text">{{ item.label }}</view>
					</view>
				</block>
			</view>
		</view>
		<view class="product-list-wrapper"><rf-product-list :bottom="0" :list="productList" :isList="isList" :style="{ paddingTop: dropScreenH + 10 + 'upx' }"></rf-product-list></view>
		<rf-load-more :status="loadingType" v-if="productList.length > 0"></rf-load-more>
		<rf-empty :info="errorInfo || '该分类暂无商品'" v-if="productList.length === 0 && !loading"></rf-empty>
		<!--页面加载动画-->
		<rfLoading isFullScreen :active="loading"></rfLoading>
	</view>
</template>
<script>
import rfProductList from '@/components/rf-product-list';
import rfLoadMore from '@/components/rf-load-more/rf-load-more';
import { reqAdoptProductsList, reqBreedList } from '@/api';
import { mapMutations } from 'vuex';
/* eslint-disable */
export default {
	components: {
		rfProductList,
		rfLoadMore
	},
	data() {
		return {
			keyword: '',
			errorInfo: '',
			loadingType: 'more',
			page: 1,
			loading: true,
			productDetail: {},
			searchKey: '', //搜索关键词
			width: 200, //header宽度
			height: 64, //header高度
			inputTop: 0, //搜索框距离顶部距离
			arrowTop: 0, //箭头距离顶部距离
			dropScreenH: 0, //下拉筛选框距顶部距离
			isList: false, //是否以列表展示  | 列表或大图
			currentSelect: { id: '-1', label: '全部' },
			attrArr: [{ id: '-1', label: '全部' }],
			productList: [],
			brandList: [],
			productParams: {}
		};
	},
	onLoad(options) {
		let obj = {};
		// #ifdef MP-WEIXIN
		obj = wx.getMenuButtonBoundingClientRect();
		// #endif
		// #ifdef MP-BAIDU
		obj = swan.getMenuButtonBoundingClientRect();
		// #endif
		// #ifdef MP-ALIPAY
		my.hideAddToDesktopMenu();
		// #endif
		uni.getSystemInfo({
			success: res => {
				this.width = obj.left || res.windowWidth;
				this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44;
				this.inputTop = obj.top ? obj.top + (obj.height - 30) / 2 : res.statusBarHeight + 7;
				this.arrowTop = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6;
				this.searchKey = options.searchKey || '';
				//略小，避免误差带来的影响
				this.dropScreenH = (this.height * 750) / res.windowWidth + 186;
			}
		});
		this.initData(options);
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.page = 1;
		this.productList.length = 0;
		this.getProductList('refresh', {});
	},
	// 加载更多
	onReachBottom() {
		if (this.loadingType === 'nomore') return;
		this.page++;
		this.getProductList();
	},
	methods: {
		...mapMutations(['setCartNum']),
		// 初始化数据
		initData(options) {
			let params = {};
			if (options.cate_id) {
				params.cate_id = options.cate_id;
			}
			if (options.param) {
				params = { ...params, ...JSON.parse(options.param) };
			}
			if (options.keyword) {
				this.keyword = options.keyword;
				params.keyword = options.keyword;
			}
			this.productParams = params;
			this.getProductList();
			this.getBreedList();
		},

		// 获取产品详情
		async getProductDetail(row) {
			await this.$http
				.get(`${productDetail}`, {
					id: row.id
				})
				.then(async r => {
					this.productDetail = r.data;
					this.productDetail.sku_name = row.sku_name;
				});
		},

		btnDropChange(item) {
			this.currentSelect = item;
			this.page = 1;
			this.productList = [];
			this.loading = true;
			this.getProductList();
		},

		// 获取商品品牌列表
		async getBrandList() {
			await this.$http.get(`${brandIndex}`).then(r => {
				this.brandList = r.data;
			});
		},
		back() {
			this.$mRouter.back();
		},
		search() {
			this.page = 1;
			this.productList = [];
			this.loading = true;
			this.productParams = { keyword: this.keyword };
			this.getProductList();
		},
		async getProductList(type) {
			await this.$http
				.get(`${reqAdoptProductsList}`, {
					...this.productParams,
					offset: this.page - 1,
					breed: this.currentSelect.id === '-1' ? '' : this.currentSelect.label
				})
				.then(async r => {
					this.loading = false;
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
					this.loadingType = r.list.length === 10 ? 'more' : 'nomore';
					this.productList = [...this.productList, ...r.list];
				})
				.catch(err => {
					this.errorInfo = err;
					this.loading = false;
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
				});
		},
		async getBreedList() {
			await this.$http
				.get(`${reqBreedList}`, {})
				.then(async r => {
					this.attrArr = [...this.attrArr, ...r];
				})
				.catch(err => {});
		},
		// 跳转详情
		navTo(route) {
			this.$mRouter.push({ route });
		}
	}
};
</script>
<style lang="scss">
page {
	background: $page-color-base;
}


.product-list {
	padding-bottom: env(safe-area-inset-bottom);
	/* 隐藏scroll-view滚动条*/
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}
	.rf-header-box {
		width: 100%;
		background: $color-white;
		position: fixed;
		z-index: 100;
		left: 0;
		top: 0;
		.rf-header {
			display: flex;
			align-items: flex-start;
			.rf-back {
				margin-left: 8upx;
				height: 32px !important;
				width: 32px !important;
				display: flex;
				justify-content: center;
				align-items: center;
				.iconzuo {
					font-size: $font-lg + 4upx;
					font-weight: 500;
					color: $font-color-dark;
				}
			}
		}
		.input-box {
			width: 100%;
			font-size: $font-sm;
			box-sizing: border-box;
			color: #999;
			display: flex;
			align-items: center;
			overflow: hidden;
			height: 60upx;
			background-color: $page-color-base;
			border-radius: 30upx;
			position: relative;
			margin: 0 20upx 0 10upx;
			.iconsousuo2 {
				z-index: 100;
				display: flex;
				align-items: center;
				position: absolute;
				top: 0;
				right: 0;
				width: 60upx;
				height: 60upx;
				font-size: $font-lg + 4upx;
				color: $font-color-dark;
			}
			input {
				width: 100%;
				padding-left: 28upx;
				height: 28upx;
				color: $font-color-base;
				font-size: 28upx;
			}
		}
	}
	/*screen*/
	.rf-header-screen {
		width: 100%;
		background: $color-white;
		position: fixed;
		z-index: 99;
		.rf-screen-top,
		.rf-screen-bottom {
			border: none;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28upx;
			color: #333;
		}
		.rf-screen-top {
			height: 88upx;
			line-height: 88upx;
			position: relative;
			background: $color-white;
		}
		.rf-top-item {
			height: 28upx;
			line-height: 28upx;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			.iconfont {
				font-size: $font-lg + 4upx;
				font-weight: 500;
			}
		}
		.rf-screen-bottom {
			height: 100upx;
			padding: 0 30upx;
			box-sizing: border-box;
			font-size: 24upx;
			align-items: center;
			overflow: hidden;
		}
		.rf-bottom-text {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.rf-bottom-item {
			flex: 1;
			width: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 12upx;
			box-sizing: border-box;
			margin-right: 20upx;
			white-space: nowrap;
			height: 60upx;
			border-radius: 40upx;
		}
		.rf-bottom-item:last-child {
			margin-right: 0;
		}
		.rf-bold {
			font-weight: bold;
		}
		.rf-active {
			color: $base-color;
		}
		.rf-icon-ml .rf-icon-class {
			margin-left: 6upx;
		}
		.rf-ml {
			margin-left: 6upx;
		}
		.rf-seizeaseat-20 {
			height: 20upx;
		}
		.rf-seizeaseat-30 {
			height: 30upx;
		}
		.rf-icon-middle .rf-icon-class {
			vertical-align: middle;
		}
		.rf-middle {
			vertical-align: middle;
		}
	}
	/*screen*/
	.rf-btmItem-active {
		border-radius: 32upx;
		font-weight: bold;
		position: relative;
	}
	.rf-btmItem-normal {
		border: 1upx solid rgba(0, 0, 0, 0.12);
		position: relative;
	}
	.rf-btmItem-active::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 40upx;
		left: 0;
		top: 0;
	}
	.rf-btmItem-tap {
		position: relative;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
	.rf-btmItem-tap::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 22upx;
		background: #f7f7f7;
		left: 0;
		top: 58upx;
	}
	.product-list-wrapper {
		/*#ifdef MP*/
		// padding-top: 360rpx;
		padding-top: 240rpx;
		/*#endif*/
	}
}
</style>
